<template>
  <div class="orderdetail">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <van-steps :active="active">
        <van-step>已拍下</van-step>
        <van-step>已付款</van-step>
        <van-step>已发货</van-step>
        <van-step>交易成功</van-step>
        <van-step>待评价</van-step>
      </van-steps>
    </div>
    <div style="margin-top:10px">
      <van-cell-group
        inset
        v-if="order[0].sell_user_id ==$store.state.user.user_id"
      >
        <van-cell
          title="未发货"
          v-if="order[0].payment==0"
        />
        <van-cell
          title="已发货"
          v-else-if="order[0].payment==1"
        />
        <van-cell
          title="交易完成"
          v-else
        />
        <van-cell
          v-if="order[0].payment==0"
          center
          is-link
          title="请尽快发货"
          @click="show=true"
        />
        <van-cell
          v-else-if="order[0].payment==1"
          center
          is-link
          :title="logistics.logisticsname"
          :label="logistics.number"
        />
        <van-cell
          v-else
          center
          is-link
          :title="logistics.logisticsname"
          label="用户已获得商品"
        />
      </van-cell-group>
      <van-cell-group
        inset
        v-else
      >
        <van-cell
          title="未发货"
          v-if="order[0].payment==0"
        />
        <van-cell
          title="已发货"
          v-else
        />
        <van-cell
          v-if="order[0].payment==0"
          center
          is-link
          title="请联系卖家发货"
        />
        <van-cell
          v-else
          center
          is-link
          :title="logistics.logisticsname"
          :label="logistics.number"
        />
      </van-cell-group>
    </div>
    <!-- 商品信息 -->
    <div style="background-color:white">
      <div style="margin-top:10px">
        <van-row class="shop">
          <van-col span="5">
            <van-image
              width="1.7rem"
              height="1.7rem"
              :src="'apis/kuan_api/trade/'+order[0].filelist"
              fit="contain"
            />
          </van-col>
          <van-col span="15">
            {{order[0].title}}
          </van-col>
          <van-col
            span="4"
            style="color:#888888"
          >￥{{order[0].price}}</van-col>
        </van-row>
        <van-row style="padding:10px;color:#888888">
          <van-col span="20">商品总价</van-col>
          <van-col span="4">￥{{order[0].price}}</van-col>
        </van-row>
        <van-row style="padding:10px;color:#888888">
          <van-col span="20">运费</van-col>
          <van-col span="4">￥0.00</van-col>
        </van-row>
        <van-row style="padding:10px;color:#888888">
          <van-col span="20">实收款</van-col>
          <van-col
            span="4"
            style="color:red;font-size:15px"
          >￥{{order[0].price}}</van-col>
        </van-row>
      </div>
    </div>
    <!-- 收货地址 -->
    <div style="margin-top:10px;background-color:white;padding:15px">
      <p style="margin:3px;font-size:15px">收货地址</p>
      <p style="margin:2px;color:#888888">{{order[0].contact}} {{order[0].Phone}}</p>
      <p style="margin:2px;color:#888888">{{order[0].addresses}}</p>
    </div>
    <!-- 底部收货按钮 -->
    <div class="bottom">
      <van-button
        block
        type="primary"
        v-if="order[0].payment==0 && $store.state.user.user_id!=order[0].sell_user_id"
      >提醒发货</van-button>
      <van-button
        block
        class="btn_cls"
        v-if="order[0].payment==1 &&$store.state.user.user_id!=order[0].sell_user_id"
        @click="Receiving"
      >确认收货</van-button>
      <van-button
        block
        class="btn_cls"
        v-if="order[0].payment==1 && $store.state.user.user_id==order[0].sell_user_id"
        @click="Receiving"
      >提醒收货</van-button>
      <van-button
        block
        type="primary"
        v-else-if="order[0].payment==2"
      >去评价</van-button>
    </div>
    <!-- 发货弹出层 -->
    <van-popup
      v-model="show"
      round
      closeable
      :close-on-click-overlay="false"
      :style="{ height: '43%',width:'90%' }"
    >
      <div style="margin-top:55px">
        <van-collapse v-model="activeNames">
          <van-collapse-item
            title="请选择快递"
            name="1"
          >
            <van-radio-group v-model="kuaidi">
              <van-radio
                name="顺丰"
                style="padding:5px"
              >顺丰</van-radio>
              <van-radio
                name="邮政"
                style="padding:5px"
              >邮政</van-radio>
              <van-radio
                name="京东"
                style="padding:5px"
              >京东</van-radio>
              <van-radio
                name="韵达"
                style="padding:5px"
              >韵达</van-radio>
              <van-radio
                name="中通"
                style="padding:5px"
              >中通</van-radio>
              <van-radio
                name="申通"
                style="padding:5px"
              >申通</van-radio>
            </van-radio-group>
          </van-collapse-item>
        </van-collapse>
        <van-cell-group>
          <van-field
            v-model="number"
            placeholder="请输入快递单号"
          />
        </van-cell-group>
        <div class="queren">
          <van-button
            type="primary"
            block
            @click="fahuo"
          >确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "orderdetail",
  data() {
    return {
      kuaidi: "",
      activeNames: [""],
      active: "1",
      ordernum: "",
      order: [],
      deliver: "",
      number: "",
      show: false,
      logistics: [],
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    // 获取订单信息
    getdetail() {
      this.axios
        .post("apis/kuan_api/order.php", {
          code: 1,
          ordernum: this.ordernum,
        })
        .then((res) => {
          this.order = res.data.data;
          console.log(this.order);
          this.order.forEach((element) => {
            if (element.payment == 0) {
              this.active = "1";
            } else if (element.payment == 1) {
              this.active = "2";
            } else if (element.payment == 2) {
              this.active = "3";
            }
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 发货
    fahuo() {
      this.axios
        .post("apis/kuan_api/logistics.php", {
          code: 0,
          logisticsname: this.kuaidi,
          number: this.number,
          ordernum: this.ordernum,
        })
        .then((res) => {
          console.log(res);
          this.$toast.success("发货成功");
          this.getdetail();
          this.getlogistics();
          this.show = false;
        });
    },
    // 获取物流信息
    getlogistics() {
      this.axios
        .post("apis/kuan_api/logistics.php", {
          code: 1,
          ordernum: this.ordernum,
        })
        .then((res) => {
          this.logistics = res.data.data[0];
        });
    },
    // 确认收货
    Receiving() {
      this.axios
        .post("apis/kuan_api/logistics.php", {
          code: 2,
          ordernum: this.ordernum,
          price: this.order[0].price,
          selluserid: this.order[0].sell_user_id,
        })
        .then((res) => {
          this.$dialog
            .confirm({
              title: "提示",
              message: "请确认已收到商品",
            })
            .then(() => {
              this.$toast.success("确认成功");
              this.getdetail();
            });
        });
    },
  },
  created() {
    this.ordernum = this.$route.query.ordernum;
    this.getdetail();
    this.getlogistics();
  },
};
</script>

<style scoped>
.orderdetail {
  height: 100vh;
  background-color: #eeeeee;
}
.shop {
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.queren {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.btn_cls {
  background-color: #ffcc00;
}
</style>